<template>
    <div class="cl6">
        <div class="iHead1">社会治安情况统计</div>
        <div class="main">
            <div id="cr21View" ref="cr21View"></div>
            <div class="m-t" @click="openHref()">
                <el-button type="primary" size="mini">查看统计明细</el-button>
            </div>
        </div>

        <el-dialog title="社会治安情况统计统计明细" :visible.sync="chengyuanShow" width="100%" :fullscreen="true">
            <iframe style="height:90vh;width: 100%;" :src="mainUrl" frameborder="0"></iframe>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['infoData', 'posItem', 'yearItem'],
    data() {
        return {
            cr21View: null,
            chengyuanShow: false,
            mainUrl: ''
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.cr21View = this.$echarts.init(this.$refs.cr21View);
            this.chartInit();
        });
    },
    watch: {
        infoData: function (data) {
            this.chartInit();
        },
        posItem: function (infoData) {
            this.chartInit();
        },
        yearItem: function (infoData) {
            this.chartInit();
        },
    },
    methods: {
        openHref() {
            this.mainUrl
            this.chengyuanShow = true;
        },
        chartInit() {
            const that = this
            let _source = [
                ['product', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
            ], barData = [], dataArray = [];
            that.mainUrl = that.infoData[19][13][2020]
            that.infoData[19].map(i => {
                if (i[0] == that.posItem) {
                    dataArray = i[that.yearItem]
                }
            })
            dataArray.split(';').map((i, o) => {
                _source.push([i.split(':')[0], ...i.split(':')[1].split(',')])
                barData.push({
                    type: 'bar',
                    stack: 'b',
                    barWidth: 5,
                    itemStyle: {
                        borderRadius: o == that.infoData[19].length - 1 ? [12, 12, 0, 0] : [0]
                    },
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                })
            })

            console.log(_source)
            let option = {
                legend: {
                    type: 'scroll',
                    itemWidth: 20,
                    itemHeight: 10,
                    itemGap: 6,
                    icon: 'circle',
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                    pageIconColor: '#fff',
                    pageIconInactiveColor: '#888',
                    bottom: 50,
                    pageTextStyle: {
                        color: '#fff',
                        fontSize: 10,
                    }
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                dataset: {
                    source: _source
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: "#cccccccc",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#eeeeee55",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        width: 80,
                        align: 'center',
                        color: '#fff',
                    },
                },
                yAxis: {
                    gridIndex: 0,
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eeeeee55",

                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                grid: { bottom: '55%' },
                series: [...barData,
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '60%',
                    center: ['50%', '68%'],
                    emphasis: {
                        focus: 'self'
                    }, itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    labelLine: {
                        show: false
                    },
                    label: {
                        show: false,
                    },
                    encode: {
                        itemName: 'product',
                        value: '1',
                    }
                }
                ]
            };
            that.cr21View.on('updateAxisPointer', function (event) {
                const xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    const dimension = xAxisInfo.value + 1;
                    that.cr21View.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']}({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });


            that.cr21View.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.cl6 {
    width: 300px;
    height: 560px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 560px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .main {
        position: relative;
        z-index: 2;
        width: 300px;
        color: #fff;

        #cr21View {
            margin-top: -50px;
            width: 300px;
            height: 560px;
        }

        .m-t {
            position: absolute;
            z-index: 99;
            bottom: 10px;
            left: calc(50% - 60px);
        }

    }
}
</style>